<template>
  <div>
    <DocHeader :title="data.title"></DocHeader>
    <div class="docMain">
      <div>尊敬的患者及（或）家属：您好！</div>
      <div class="textIndent2">
        根据您（或您的家人）住院期间的疾病程度和身体状况等，我们应用Braden压疮危险因素评估表进行评估，您（或您的家人）在以下方面存在问题：
      </div>
      <div class="flexBox">
        <div class="flexBox checkBoxItem">
          <div class="checkBox"></div>
          <span>感觉</span>
        </div>
        <div class="flexBox checkBoxItem">
          <div class="checkBox"></div>
          <span>潮湿</span>
        </div>
        <div class="flexBox checkBoxItem">
          <div class="checkBox"></div>
          <span>活动方式</span>
        </div>
        <div class="flexBox checkBoxItem">
          <div class="checkBox"></div>
          <span>活动能力</span>
        </div>
        <div class="flexBox checkBoxItem">
          <div class="checkBox"></div>
          <span>营养</span>
        </div>
        <div class="flexBox checkBoxItem">
          <div class="checkBox"></div>
          <span>摩擦力和剪切力</span>
        </div>
      </div>
      <div>
        6项累计总分为
        <span class="point">{{ point }}</span>
        分，预示有压疮发生的危险
      </div>
      <div class="textIndent2">
        我们将采取积极的护理措施，希望得到您的配合，让我们共同努力，尽量防止压疮的发生，希望患者及家属注意：
      </div>
      <div class="flexBox dotItem">
        <div class="dot"></div>
        <div>
          配合、协助护理人员予定时变化体位或采取局部减压措施，安置气垫床。用软枕、三角垫、手圈、脚圈等设施悬空骨隆突处，支持身体空隙处，避免局部长期受压。翻身时避免使用拖、拉、推等动作。
        </div>
      </div>
      <div class="flexBox">
        <div class="dot"></div>
        <div>半卧位时间不宜过长，角度不宜过高，以免造成剪切力。</div>
      </div>
      <div class="flexBox">
        <div class="dot"></div>
        <div>
          保持床单位清洁、干燥；保持皮肤清洁。对大小便失禁、出汗多的患者，应及时予轻柔擦洗及更换被服。
        </div>
      </div>
      <div class="flexBox">
        <div class="dot"></div>
        <div>
          患者身体虚弱，对热的敏感性差，容易发生烫伤，给患者擦身时要先试水温，禁止使用热水袋。
        </div>
      </div>
      <div class="flexBox">
        <div class="dot"></div>
        <div>使用便盆时，动作要轻柔，最好用软布包裹盆沿，防止皮肤擦伤。</div>
      </div>
      <div class="flexBox">
        <div class="dto"></div>
        <div>及时修剪患者及陪人指甲，防止无意中抓伤。</div>
      </div>
      <div class="flexBox">
        <div class="dot"></div>
        <div>增进患者营养，给予高蛋白、高热量、高维生素、易消化饮食。</div>
      </div>
      <div class="flexBox">
        <div class="dot"></div>
        <div>配好进行功能锻炼 / 最大限度活动肢体。</div>
      </div>
      <div class="flexBox">
        <div class="dot"></div>
        <div>轮流陪护时做好交接班。</div>
      </div>
      <div class="flexBox">
        <div class="dot"></div>
        <div>其他：</div>
      </div>
      <div class="sign">
        <div class="flexBox">
          <div>告知护士</div>
          <div>日 期</div>
        </div>
        <div class="flexBox">
          <div>告知对象</div>
          <div>与患者关系</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from 'vue'

import { getLastNotVTENew } from '@/api/nursing/evalutation'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    patCur: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      point: ''
    })

    function getPoint() {
      getLastNotVTENew({
        patientIdent: props.patCur.patientIdent,
        hospitalNumber: props.patCur.hospitalNumber,
        pgCode: 'pgpf_braden_new',
        dataSource: '1'
      }).then(res => {
        state.point = res.data.showValue
      })
    }

    watch(
      () => props.patCur,
      val => {
        if (val) {
          getPoint()
        }
      },
      {
        immediate: true
      }
    )

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss" scoped>
.docMain {
  line-height: 1.8em;
  margin-top: 10px;
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;
}

.checkBoxItem {
  align-items: center;

  & + .checkBoxItem {
    margin-left: 30px;
  }
}

.checkBox {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border: 1px solid #000;
}

.dotItem {
  align-items: flex-start;
}

.dot {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
  margin-top: 10px;
  margin-right: 10px;
}

.point {
  display: inline-block;
  min-width: 1em;
}

.sign {
  margin-top: 100px;

  .flexBox {
    & + .flexBox {
      margin-top: 40px;
    }

    & > div {
      flex: 1;
    }
  }
}
</style>
